<template>
  <a-modal
    :title="title"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="cancel"
  >
    <template slot="footer">
      <div class="footerBox">
        <a-button
          :disabled="serviceAgreement"
          @click="handleSubmit"
          type="primary"
        >
          生成服务协议
        </a-button>
        <a-button
          :disabled="serviceAgreement"
          type="primary"
        >
          生成服务声明
        </a-button>
        <a-button
          :disabled="clickOrder"
          type="primary"
        >
          订单完成
        </a-button>
        <a-button
          :disabled="clickOrder"
          @click="delByIds"
          type="primary"
        >
          删除订单
        </a-button>
      </div>
    </template>
    <div class="headCard">
      <div class="headCardText">
        <span>经销商名称：</span>
        <span>北京xxxx汽车销售服务有限公司</span>
      </div>
      <div class="headCardText">
        <span>机构代码：</span>
        <span>PHUWEY-110293787239</span>
      </div>
    </div>
    <a-form
      :form="form"
      :onFieldsChange="changeVal()"
    >
      <a-row>
        <a-col :md="24">
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">基本信息</span>
          </div>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="订单号"
          >
            <a-input
              placeholder="订单号"
              :disabled="true"
              v-decorator="['orderId']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="服务合同号"
          >
            <a-input
              placeholder="服务合同号"
              :disabled="true"
              v-decorator="['serviceContractNo']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="下单日期"
          >
            <a-date-picker
              :disabled="true"
              valueFormat="YYYY-MM-DD"
              v-decorator="['orderTime']"
              style="width: 100%"
              placeholder="下单日期"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="业务员姓名"
          >
            <a-input
              placeholder="业务员姓名"
              v-decorator="['saleName']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="24">
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">车辆信息</span>
          </div>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车辆组别"
          >
            <a-select v-decorator="['carType', {initialValue:'',rules: [{ required: false, message: '请选择车辆组别' }]}]">
              <a-select-option :value="'1'">旧车/燃油</a-select-option>
              <a-select-option :value="'2'">旧车/混动</a-select-option>
              <a-select-option :value="'3'">旧车/纯电</a-select-option>
              <a-select-option :value="'4'">新车/燃油</a-select-option>
              <a-select-option :value="'5'">新车/混动</a-select-option>
              <a-select-option :value="'6'">新车/纯电</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label=""
          >
            <a-radio>新车</a-radio>
            <a-radio>旧车</a-radio>
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车辆品牌"
          >
            <a-input
              placeholder="车辆品牌"
              v-decorator="['carBrand']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="品牌型号"
          >
            <a-input
              placeholder="品牌型号"
              v-decorator="['brandModel']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车主姓名"
          >
            <a-input
              placeholder="车主姓名"
              v-decorator="['carName']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="身份证号"
          >
            <a-input
              placeholder="身份证号"
              v-decorator="['idCard']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="手机号"
          >
            <a-input
              placeholder="手机号"
              v-decorator="['iphone']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="服务权益人姓名"
          >
            <a-input
              placeholder="服务权益人姓名"
              v-decorator="['serviceStakeholders']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车牌号/发动机号："
          >
            <a-input
              placeholder="车牌号"
              v-decorator="['carNumber']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车架号"
          >
            <a-input
              placeholder="车架号"
              v-decorator="['vinNo']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车险承保公司"
          >
            <a-input
              placeholder="车险承保公司"
              v-decorator="['insuranceCarriers']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="车辆损失险保单号"
          >
            <a-input
              placeholder="车辆损失险保单号"
              v-decorator="['lossPolicy']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="保额"
          >
            <a-input
              placeholder="保额"
              v-decorator="['insuredAmount']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商业险起保日期"
          >
            <!-- <a-input placeholder="商业险起保日期" v-decorator="['insuranceStartdate']"/> -->
            <a-date-picker
              valueFormat="YYYY-MM-DD"
              v-decorator="['insuranceStartdate']"
              style="width: 100%"
              placeholder="商业险起保日期"
            />
          </a-form-item>
        </a-col>
        <a-col :md="24">
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">项目承保信息</span>
          </div>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="投保方案"
          >
            <a-select v-decorator="['insuranceScheme', {initialValue:'',rules: [{ required: false, message: '请选择投保方案' }]}]">
              <a-select-option :value="'一'">一</a-select-option>
              <a-select-option :value="'二'">二</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="保险费"
          >
            <a-input
              placeholder="保险费"
              v-decorator="['insurancePremium']"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="赔偿限额"
          >
            <a-input
              placeholder="赔偿限额"
              v-decorator="['compensationLimit']"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { saveSysBusinessInfo, delSysBusinessInfo } from '@/api/system'
import pick from 'lodash.pick'
export default {
  name: 'SysBusinessInfoModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      visible: false,
      title: '新建订单',
      labelCol: {
        xs: { span: 10 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 14 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      datePicker: '',
      serviceAgreement: true,
      clickOrder: true
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add () {
      this.title = '新建订单'
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    changeVal () {
      this.form.validateFields((err, values) => {
        if (!err) {

        }
      })
    },
    edit (record) {
      this.title = Object.keys(record).length === 1 ? '新建订单' : '编辑'
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'compensationLimit', 'insurancePremium', 'insuranceScheme', 'insuranceStartdate', 'insuredAmount', 'lossPolicy', 'insuranceCarriers', 'engineNo', 'vinNo', 'carNumber', 'iphone', 'serviceStakeholders', 'idCard', 'carName', 'brandModel', 'carBrand', 'saleName', 'carType', 'serviceContractNo', 'orderTime', 'orderId', 'id'))
      })
    },
    cancel () {
      if (this.title === '编辑') return
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          saveSysBusinessInfo({ ...values, id: this.mdl.id + '' }).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          saveSysBusinessInfo({ ...values, id: this.mdl.id }).then(res => {
            if (res.code === 0) {
              this.serviceAgreement = false
              this.clickOrder = false
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    delByIds () {
      delSysBusinessInfo({ ids: this.mdl.id.join(',') }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.handleOk()
        } else {
          this.$message.error(res.msg)
        }
        this.selectedRowKeys = []
      })
    }
  },
  watch: {
    mdl: function (e) {
      console.log(e, '------>>>>>>')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-control {
  max-width: 180px;
  min-width: 140px;
}
.headCard {
  height: 60px;
  padding: 12px;
  background: #bae7ff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 23px;
}
.title {
  display: flex;
  .titleRece {
    width: 2px;
    height: 16px;
    background: #227fe6;
    margin-right: 8px;
  }
  .titleText {
    font-family: 'PingFangSC-Semibold';
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }
}
.footerBox {
  display: flex;
  justify-content: center;
  padding: 0 30px 30px 30px;
}
/deep/ .ant-modal-footer {
  border: none;
}
</style>
